<template>
	<!-- 商品分类 -->
	<view :style="colorStyle">
		<!-- 商品分类的三种样式布局 pdHeight:自定义导航diy设置的上下边距 -->
		<!-- <template1 v-if="activeIndex == 0"
			:level="level"
			:isFooter="isFooter"
			:pdHeight="pdHeight"
			ref="classOne"></template1> -->
		<template2 v-if="showTemplateTwo"
			:level="level"
			:showType="activeIndex"
			:isFooter="isFooter"
			ref="classTwo"></template2>
		<template3 v-if="showTemplateThree"
			:showType="activeIndex"
			:isFooter="isFooter"
			ref="classThree"></template3>
		<template4 v-if="showTemplateFour"
			:level="level"
			:isFooter="isFooter"
			:pdHeight="pdHeight"
			@toggleBar="toggleBar"
			ref="classFour"></template4>
		<!-- template5 使用场景：1分类页 2门店选择商品   -->
		<!-- <template5 v-if="activeIndex == 4"
			:level="level"
			:isFooter="isFooter"
			:pdHeight="pdHeight"
			ref="classOne"></template5> -->
		<pageFooter @newDataStatus="newDataStatus"
			v-show="showBar"></pageFooter>
	</view>
</template>

<script>
	import colors from "@/mixins/color";
	import template1 from './template/template1.vue';
	import template2 from './template/template2.vue';
	import template3 from './template/template3.vue';
	import template4 from './template/template4.vue';
	import template5 from './template/template5.vue';
	import pageFooter from '@/components/pageFooter/index.vue'
	import { colorChange } from '@/api/api.js';
	import { mapGetters } from 'vuex';
	export default {
		data() {
			userInfo: {}
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'diyCategory']),
			//diyCategory 暴露两个属性 level 和 index ,分别为分类等级和模板下标
			level() {
				return this.diyCategory.level
			},
			activeIndex() {
				return this.diyCategory.index
			},
			showTemplateTwo() {
				if (([2, 3].includes(this.activeIndex) && this.level == 2) || ([1, 2].includes(this.activeIndex) && this.level == 3)) {
					return true
				}
			},
			showTemplateThree() {
				if ([1, 4].includes(this.activeIndex) && this.level == 2) {
					return true
				}
			},
			showTemplateFour() {
				if ((this.activeIndex == 5 && this.level == 2) || (this.activeIndex == 3 && this.level == 3)) {
					return true
				}
			}
		},
		components: {
			template1,
			template2,
			template3,
			template4,
			template5,
			pageFooter
		},
		mixins: [colors],
		provide() {
			return {
				parent: this
			}
		},
		data() {
			return {
				isFooter: false,
				showBar: false,
				pdHeight: 0
			}
		},
		onShow() {
			uni.setNavigationBar({
				frontColor: '#000',
				backgroundColor: '#fff',
			})
			if (this.isFooter) {
				uni.hideTabBar()
			}

		},
		onUnload() {
			uni.$off('newAttrNum')
		},
		methods: {
			newDataStatus(val, num) {
				this.isFooter = val ? true : false;
				this.showBar = val ? true : false;
				this.pdHeight = num;
			},
			toggleBar(val) {
				this.showBar = val;
			}
		},
		onPageScroll(e) {
			if (this.showTemplateFour || this.showTemplateTwo) {
				uni.$emit('scroll', e.scrollTop);
			}
		},
		onReachBottom() {
			if (this.showTemplateFour) {
				this.$refs.classFour.productslist();
			}
			if (this.showTemplateTwo) {
				uni.$emit('onReachBottom');
			}
		},
		onShareAppMessage() {
			let uid = this.uid ? this.uid : 0;
			return {
				title: '途安车服',
				path: '/pages/index/index?spid=' + uid
			};
		},
	}
</script>
<style lang="stylus"
	scoped>
	/deep/.line2 {
		font-weight: bold;
	}

	/deep/.header-wrap {
		/* #ifdef MP */
		padding: 0 220rpx 0 30rpx;
		/* #endif */
		/* #ifndef MP */
		padding: 0 30rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		padding: 0 240rpx 0 70rpx;
		/* #endif */
	}
</style>